<template>
  <div class="vx-tip-warn">
    <i class="ui-icon-warning tip-icon"></i>
    <div class="content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'vx-tip-warn',
};
</script>
<style lang="scss">
.vx-tip-warn {
  padding: 10px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;

  .content {
    font-size: 0.9em;
    line-height: 1.5;
  }

  .tip-icon {
    color: #faad13;
    flex-shrink: 0;
    flex-grow: 0;
    margin-top: 2px;
  }
}
</style>
